import React, { Component } from 'react'
import { List } from 'antd-mobile'
import '../../assets/css/detail/k-comment.less'
const Item = List.Item
// const Brief = Item.Brief
export default class KCommemt extends Component {
    state = {
        data: [
            {
                id:1,
                usename: '用户名',
                avatar: require('../../assets/images/avatar.jpg'),
                upvote: 67,
                comment:'评论内容'
            },
            {
                id:2,
                usename: '用户名',
                avatar: require('../../assets/images/avatar.jpg'),
                upvote: 23,
                comment:'评论内容'
            },
            {
                id:3,
                usename: '用户名',
                avatar: require('../../assets/images/avatar.jpg'),
                upvote: 156,
                comment:'评论内容'
            }
        ]
    }
    render() {
        return (
            <div className='k-comment'>
                <h4>相关评论</h4>
                <List >
                    {
                        this.state.data.map(e => {
                            return (
                                <Item
                                    key={e.id}
                                    extra={<div><i className='iconfont icon-good' style={{marginRight:'2px'}} ></i><span>{e.upvote}</span></div>}
                                    prefix={ <img style={{width:'50px',height:'50px',borderRadius:'50%'}} src={e.avatar} alt='' /> } 
                                    title={e.usename}
                                    description={e.comment}
                                >
                                </Item>
                            )
                        })
                    }
                </List>
            </div>
        )
    }
}
